<template>
    <div style="padding:6px;">
        <el-card v-show="showSearch" style="margin-bottom:5px;">
            <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px" style="margin-bottom:-20px;">
                <el-form-item label="参数编码" prop="name">
                    <el-input v-model="queryParams.code" placeholder="请输入参数编码" clearable size="small"
                        @keyup.enter.native="handleQuery" />
                </el-form-item>
                <el-form-item label="参数名称" prop="name">
                  <el-input v-model="queryParams.name" placeholder="请输入参数名称" clearable size="small"
                            @keyup.enter.native="handleQuery" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                    <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                </el-form-item>
                <el-form-item style="float:right;">
                    <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
                        v-hasPermi="['iot:parameter:add']">新增</el-button>
                </el-form-item>
            </el-form>
        </el-card>

        <el-card style="padding-bottom:100px;">
            <el-table v-loading="loading" :data="parameterList" @selection-change="handleSelectionChange" border>
                <el-table-column label="参数ID" align="center" prop="id" />
                <el-table-column label="参数编码" align="center" prop="code" />
                <el-table-column label="参数名称" align="center" header-align="center" prop="name" min-width="150" />
                <el-table-column label="参数最大值" align="center" prop="parameterMax" />
                <el-table-column label="参数最小值" align="center" prop="parameterMin" />
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="150">
                    <template slot-scope="scope">
                        <el-button size="small" type="text" style="padding:5px;" icon="el-icon-edit"
                            @click="handleUpdate(scope.row)" v-hasPermi="['iot:parameter:query']"
                            >修改</el-button>
                        <el-button size="small" type="text" style="padding:5px;" icon="el-icon-delete"
                            @click="handleDelete(scope.row)" v-hasPermi="['iot:parameter:remove']"
                            >删除</el-button>
<!--                        <span style="font-size:10px;color:#999;" v-if="scope.row.isSys == '1' && isTenant">系统定义，不能修改</span>-->
                    </template>
                </el-table-column>
            </el-table>

            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize" @pagination="getList" />

            <!-- 添加或修改产品分类对话框 -->
            <el-dialog title="设备参数设置" :visible.sync="open" width="500px" append-to-body>
                <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                    <el-form-item label="参数编码" prop="code">
                        <el-input v-model="form.code" placeholder="请输入参数编码" :disabled="form.id != null"/>
                    </el-form-item>
                    <el-form-item label="参数名称" prop="name">
                      <el-input v-model="form.name" placeholder="请输入参数名称" />
                    </el-form-item>
                    <el-form-item label="参数最大值" prop="parameterMax">
                      <el-input v-model="form.parameterMax" placeholder="请输入参数最大值" />
                    </el-form-item>
                    <el-form-item label="参数最小值" prop="parameterMin">
                      <el-input v-model="form.parameterMin" placeholder="请输入参数最小值" />
                    </el-form-item>
<!--                    <el-form-item label="显示顺序" prop="orderNum">-->
<!--                        <el-input-number controls-position="right" v-model="form.orderNum"-->
<!--                            placeholder="请输入显示顺序" style="width:100%" />-->
<!--                    </el-form-item>-->
<!--                    <el-form-item label="备注" prop="remark">-->
<!--                        <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />-->
<!--                    </el-form-item>-->
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="submitForm" v-hasPermi="['iot:parameter:edit']"
                        v-show="form.id">修 改</el-button>
                    <el-button type="primary" @click="submitForm" v-hasPermi="['iot:parameter:add']"
                        v-show="!form.id">新 增</el-button>
                    <el-button @click="cancel">取 消</el-button>
                </div>
            </el-dialog>

        </el-card>
    </div>
</template>

<script>
import {
    listCategory,
    getCategory,
    delCategory,
    addCategory,
    updateCategory
} from "@/api/iot/category";

import {
  listParameter,
  getParameter,
  getParameterCode,
  delParameter,
  addParameter,
  updateParameter
} from "@/api/iot/parameter";

export default {
    name: "Parameter",
    dicts: ["iot_yes_no"],
    data() {
        return {
            // 是否为租户
            isTenant: false,
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 产品分类表格数据
          parameterList: [],
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 20,
                name: null
            },
            // 表单参数
            form: {},
            // 表单校验
            rules: {
                code: [{
                  required: true,
                  message: "参数编码不能为空",
                  trigger: "blur"
                }
                ],
                name: [{
                    required: true,
                    message: "参数名称不能为空",
                    trigger: "blur"
                },
                  // {
                  //   min: 1,
                  //   max: 64,
                  //   message: '产品分类不能少于1个字符和超过64字符',
                  // },
                ],
                // orderNum: [{
                //     required: true,
                //     message: '分类顺序不能为空',
                //     trigger: 'blur',
                // }, {
                //     type: 'number',
                //     min: -2147483648,
                //     max: 2147483647,
                //     message: '顺序值不能超过int型的取值范围(-2^31——2^31-1)',
                //     trigger: 'blur',
                // }],
                // remark: [{
                //     required: false,
                //     min: 0,
                //     max: 500,
                //     message: '备注不能输入超过500个字符',
                //     trigger: 'blur',
                // }],
                // isSys: [{
                //     required: true,
                //     message: "是否系统通用不能为空",
                //     trigger: "blur"
                // }],
            }
        };
    },
    created() {
        this.getList();
        this.init();
    },
    methods: {
        init() {
            if (this.$store.state.user.roles.indexOf("tenant") !== -1) {
                this.isTenant = true
            }
        },
        /** 查询设备参数列表 */
        getList() {
            this.loading = true;
            listParameter(this.queryParams).then(response => {
              console.log(11111111111111111,response)
                this.parameterList = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {
                id: null,
                monitorId: null,
                deviceCode: null,
                name: null,
                code: null,
                parameterMax: null,
                parameterMin: null
            };
            this.resetForm("form");
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.id)
            this.single = selection.length !== 1
            this.multiple = !selection.length
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.reset();
            this.open = true;
            this.title = "添加设备参数";
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            this.reset();
            const id = row.id || this.ids
            getParameter(id).then(response => {
                this.form = response.data;
                this.open = true;
                this.title = "修改设备参数";
            });
        },
        /** 提交按钮 */
        submitForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                  if (this.form.code !=null){
                    getParameterCode(this.form.code).then(response => {
                        if (this.form.id != null) {
                          updateParameter(this.form).then(response => {
                            this.$modal.msgSuccess("修改成功");
                            this.open = false;
                            this.getList();
                          });
                        } else {
                          if (response.data != null && response.data != '') {
                            this.$modal.msgError("设备参数编码已存在");
                          }else {
                            addParameter(this.form).then(response => {
                              this.$modal.msgSuccess("新增成功");
                              this.open = false;
                              this.getList();
                            });
                          }
                        }
                    })
                  }
                }
            });
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            const ids = row.id || this.ids;
            let msg = "";
            this.$modal.confirm('是否确认删除设备参数编号为"' + ids + '"的数据项？').then(function () {
                return delParameter(ids).then(response => {
                  if (response==1){
                      msg = "删除成功";
                  }else{
                      msg = "删除失败";
                  }
                });
            }).then(() => {
                this.getList();
                this.$modal.msgSuccess(msg);
            }).catch(() => { });
        },
        /** 导出按钮操作 */
        handleExport() {
            this.download('iot/category/export', {
                ...this.queryParams
            }, `category_${new Date().getTime()}.xlsx`)
        }
    }
};
</script>
